<template>
  <div class="login" ref="login">
    <van-field v-model="tel" type="tel" placeholder="请输入手机号" />
    <van-field
      center
      clearable
      placeholder="请输入短信验证码"
    >
      <van-button slot="button" size="small" type="primary">获取验证码</van-button>
    </van-field>

    <div class="btn" @click="$router.push('/')">登录</div>

    <div class="second-try">
      <div @click="$router.push('/login')">密码登录</div>
      <div @click="$router.push('/register')">新用户注册</div>
    </div>

    <!-- 勾选协议 -->
    <div class="agreement">
      <van-checkbox-group v-model="result">
        <van-checkbox name="value">已阅读并同意<a href="#">《租车协议》</a></van-checkbox>
      </van-checkbox-group>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tel: "",
      password: "",
      value: '',
      result: []
    };
  },
  mounted() {
    this.getHeight();
  },
  methods: {
    getHeight() {
      this.$refs.login.style.height =
        document.documentElement.clientHeight + "px";
    }
  }
};
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 0;
  background-color: rgb(236, 236, 236);
  padding-top: 100px;
  box-sizing: border-box;
  .van-field {
    width: 80%;
    margin: 0 auto;
    margin-bottom: 10px;
    border-radius: 10px;
  }
  p {
    text-align: center;
    font-size: 8px;
    margin: 20px 0;
  }
  .btn {
    width: 200px;
    height: $height;
    line-height: $height;
    text-align: center;
    color: #fff;
    background-color: $color;
    border-radius: 20px;
    margin: 0 auto;
  }

  .second-try {
    width: 80%;
    margin: 10px auto;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
  }

  .agreement {
    width: 90%;
    position: absolute;
    bottom: 20px;
    left: 15px;
    box-sizing: border-box;
  }
}
</style>